<template>
  <div class="scene-selector mb-20px">
    <span class="text-14px">场景：</span>
    <el-tag
      v-for="item in sceneList"
      effect="dark"
      :key="item.id"
      :class="{ active: sceneSelectId == item.id }"
      @click="selectScene(item)"
    >
      {{ item.name }}
    </el-tag>

    <el-dropdown trigger="click" size="small">
      <el-tag>
        <Icon icon="ep:arrow-down" />
      </el-tag>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="setScene"> 场景管理 </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <SceneFormSet ref="scenRef" @success="getList" />
  </div>
</template>

<script setup>
import * as AdvancedQueryApi from '@/api/crm/advancedQuery/index.ts'
import SceneFormSet from '../SceneForm/sceneSet.vue'

const sceneList = ref([])
const sceneSelectId = ref(-1)

const props = defineProps({
  page: {
    type: String
  }
})
/**场景列表*/
const getList = async () => {
  const res = await AdvancedQueryApi.querySceneList({ page: props.page })
  sceneList.value = res.filter((item) => item.status == 1)
}
watch(
  () => props.page,
  (val) => {
    if (val) getList()
  },
  { immediate: true, deep: true }
)
const scenRef = ref(null)
/**场景管理*/
const setScene = () => {
  scenRef.value.open(props.page)
}
const emit = defineEmits(['search'])

// 选择场景、
const selectScene = (item) => {
  sceneSelectId.value = item.id
  emit('search', item)
}
</script>

<style lang="scss" scoped>
.scene-selector {
  .el-tag {
    border: none;
    height: 26px;
    line-height: 26px;
    font-size: 13px;
    background-color: #f4f4f5;
    color: #333;
    &.active {
      background-color: #2362fb;
      color: #fff;
    }
    cursor: pointer;
    margin-right: 5px;
  }
}
</style>
